<template>
  <router-link :to="`/goodsDetail/${data.goods_id}`"
               class="goods">
    <img v-lazy="data.goods_image"
         alt="" />
    <div class="msg">
      <p class="goods-name">{{data.goods_name}}</p>
      <p class="goods-price-sale">
        <span class="goods-price"><em>￥</em>{{data.goods_price}}</span>
        <span class="goods-sale">已售出 {{data.goods_salenum}}</span>
      </p>
      <p class="seller-name">{{data.seller_name}}</p>
    </div>
  </router-link>
</template>

<script>
export default {
  props: ['data']
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/css/pub";

.goods {
  display: flex;
  align-items: center;
  padding: .25rem;
  margin-top: .25rem;
  background-color: #fff;
  img {
    width: 2.2725rem;
    height: 2.2725rem;
    margin-right: .25rem;
  }
  .msg {
    height: 2.2725rem;
    width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .goods-name {
      font-size: .3625rem;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .goods-price {
      font-size: .45rem;
      color: $active_background_color;
      em {
        font-style: normal;
        font-size: .2375rem;
      }
    }
    .goods-sale {
      font-size: .2875rem;
      color: #999;
      float: right;
    }
    .seller-name {
      font-size: .3125rem;
    }
  }
}
</style>
